<template>
	<div>
		<div class="chunk">
			<div class="title">基础信息</div>
			<div class="container_detail">
				<FormItems
					v-model="info"
					:form="formlist.basicInfo"
					state="readonly"
					labelWidth="100px"></FormItems>
			</div>
		</div>
		<div class="chunk">
			<div class="title">收款信息</div>
			<div class="container_detail">
				<FormItems
					v-model="info"
					:form="formlist.collectInfo"
					state="readonly"></FormItems>
			</div>
		</div>
		<div class="chunk">
			<div class="title">财务收款</div>
			<div class="container_voucher">
				<FormItems
					v-model="info"
					:form="formlist.voucher"
					ref="form"></FormItems>

				<div class="handleBox">
					<el-button type="" size="mini" @click="back">
						取消
					</el-button>
					<el-button type="primary" size="mini" @click="submit">
						提交
					</el-button>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import * as regs from '@/utils/validator.js';
	import FormItems from '../formItems/index.vue';
	import * as apis from '@/api/finance/manage/collectSingle/api.js';
	export default {
		name: 'CollectSingle',
		components: { FormItems },
		mixins: [],
		props: {},
		data() {
			return {
				info: {},
				basicInfo: [],
				collectInfo: [],
				form: {},
				payTypeList: [
					{
						label: '月付',
						value: '0',
					},
					{
						label: '季付',
						value: '1',
					},
					{
						label: '半年',
						value: '2',
					},
					{
						label: '年付',
						value: '3',
					},
				],
				bankList: [],
			};
		},
		dicts: ['finance_payment_type'],
		computed: {
			proceedsId() {
				return this.$route.query.proceedsId;
			},
			formlist() {
				return {
					basicInfo: [
						{
							label: '应收单号',
							prop: 'proceedsCode',
						},
						{
							label: '车牌号',
							prop: 'carCode',
						},
						{
							label: '业务单号',
							prop: 'earnCode',
						},
						{
							label: '业务类型',
							prop: 'proceedsTypeStr',
						},
						{
							label: '车辆来源',
							prop: 'carSource',
						},
						{
							label: '客户',
							prop: 'earnCustomerName',
						},
						{
							label: '车辆所属公司',
							prop: 'carAppertainCompany',
						},
						{
							label: '车辆运营公司',
							prop: 'carRunCompany',
						},
						{
							label: '开票状态',
							prop: 'ticketStatusStr',
						},
					],
					collectInfo: [
						{
							label: '所属月份',
							prop: 'affiliationMonth',
						},
						{
							label: '应收类型',
							prop: 'proceedsTypeStr',
						},
						{
							label: '期数',
							prop: 'periodsNum',
						},
						{
							label: '应收金额',
							prop: 'receivableAmount',
							format: row => {
								return this.format_thousand(
									row.receivableAmount,
								);
							},
						},
						{
							label: '待收金额',
							prop: 'waitAmount',
							format: row => {
								return this.format_thousand(row.waitAmount);
							},
						},
						{
							label: '已收金额',
							prop: 'receivedAmount',
							format: row => {
								return this.format_thousand(row.receivedAmount);
							},
						},
						{
							label: '应收时间',
							prop: 'repaymentTime',
						},
						{
							label: '逾期时间',
							prop: 'repaymentTime',
						},
						{
							label: '逾期天数',
							prop: 'overdueDay',
						},
					],
					voucher: [
						{
							label: '收款金额',
							prop: 'currentAmount',
							type: 'input_number',
							tag: 'price',
							rules: [
								{
									required: true,
									message: '请输入收款金额',
									trigger: 'blur',
								},
							],
							prototype: {
								step: 0.01,
								stepStrictly: true,
							},
						},
						{
							label: '收款方式',
							prop: 'paymentType',
							type: 'select',
							selectList:
								this.dict?.type?.finance_payment_type ?? [],
							rules: [
								{
									required: true,
									message: '请选择收款方式',
									trigger: 'change',
								},
							],
						},
						{
							label: '收款时间',
							prop: 'paymentTime',
							type: 'datePicker',
							datePickerType: 'date',
							valueFormat: 'yyyy-MM-dd HH:mm:ss',
							rules: true,
						},
						{
							label: '收款银行',
							prop: 'paymentBank',
							type: 'select',
							selectList: this.bankList,
							selectLabel: 'BANKNAME',
							selectValue: 'BANKNAME',
							rules: true,
							event: {
								type: 'change',
								cb: row => {
									let item = this.bankList?.find(
										e => e.BANKNAME === row.paymentBank,
									);
									if (item) {
										this.$set(
											row,
											'paymentAccount',
											item.ACCNUM,
										);
									}
								},
							},
						},
						{
							label: '收款账号',
							prop: 'paymentAccount',
							type: 'input',
							rules: [
								{
									required: true,
									message: '请输入收款卡号',
									trigger: 'blur',
								},
								{
									pattern: regs.BANK_ACC_REG,
									message: '请输入正确银行卡卡号',
									trigger: 'blur',
								},
							],
						},
						{
							label: '收款凭证',
							prop: 'earningProve',
							type: 'upload',
							prototype: {
								fileType: ['png', 'jpg', 'jpeg'],
								limit: 1,
								upType: 0,
							},
							fitContent: true,
							block: true,
							// formitemPrototype: {
							// 	style: {
							// 		// width: "100%",
							// 		flex: 1,
							// 	},
							// },
						},
						{
							label: '备注',
							prop: 'remark',
							type: 'textarea',
							fitContent: true,
							block: true,
						},
					],
				};
			},
		},
		watch: {},
		created() {
			this.getList();
		},
		filters: {},
		methods: {
			getBankList() {
				let params = {
					carAppertainCompany: this.info.carAppertainCompany,
				};
				apis?.BankList(params).then(res => {
					if (res.code == 200) {
						this.bankList = res.data ?? [];
					}
				});
			},
			getList() {
				if (!this.proceedsId) return;
				apis?.Info(this.proceedsId)
					.then(res => {
						this.info = res.data ?? {};
						this.info.currentAmount ??= this.info.waitAmount;
						this.getBankList();
						this.$nextTick(() => {
							this._clearValid();
						});
					})
					.finally(() => {});
			},
			valid() {
				return new Promise(async resolve => {
					let result = true;
					let refs = Object.values(this.$refs);
					for (let index = 0; index < refs?.length; index++) {
						const ref = refs[index];
						if (
							Object.prototype.toString.call(ref) ==
							'[object Array]'
						) {
							for (let i = 0; i < ref.length; i++) {
								const element = ref[i];
								if (element?.valid) {
									let rc = await element?.valid?.();
									result = result && rc;
								}
								if (element?.validate) {
									let rf = await this._valid(ref);
									result = result && rf;
								}
								if (element?.form_validate) {
									let rf = await this._valid(
										ref,
										'form_validate',
									);
									result = result && rf;
								}
							}
						} else {
							if (ref?.valid) {
								let rc = await ref?.valid?.();
								result = result && rc;
							}
							if (ref?.validate) {
								let rf = await this._valid(ref);
								result = result && rf;
							}
							if (ref?.form_validate) {
								let rf = await this._valid(
									ref,
									'form_validate',
								);
								result = result && rf;
							}
						}
					}

					resolve(result);
				});
			},
			back() {
				this.$tab.closeOpenPage(this.$route);
				this._toPage({
					path: '/finance/collect',
				});
			},
			async submit() {
				let pass = await this.valid();
				if (!pass) {
					this.scrollToError();
					return;
				}
				this.$modal.loading('正在提交中，请稍候...');
				apis.Save(this.info)
					.then(res => {
						if (res.code == 200) {
							this.$message({
								message: '保存成功！',
								type: 'success',
							});
							this.$tab.closeOpenPage(this.$route);
							this._toPage({
								path: '/finance/collect',
								// name: 'Collect',
							});
						}
					})
					.finally(() => {
						this.$modal.closeLoading();
					});
			},
		},
	};
</script>
<style lang="scss" scoped>
	.chunk {
		overflow: hidden;
		background-color: #fff;
		border-radius: 4px;
		padding: 15px 20px;
		margin: 20px;
		box-sizing: border-box;
		.title {
			border-bottom: 1px solid #e9e9e9;
			padding-bottom: 15px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 16px;
			color: #333333;
			line-height: 22px;
			text-align: left;
			font-style: normal;
		}
	}
	.gridBox {
		display: grid;
		padding: 15px 0;
		gap: 0 50px;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		::v-deep .el-select {
			width: 100%;
		}
	}
	.handleBox {
		margin: 20px;
		margin-top: 45px;
		padding: 15px 20px;
		background: #ffffff;
		border-radius: 8px;
		display: flex;
		justify-content: flex-end;
		// position: sticky;
		bottom: 50px;
		background: transparent;
		// height: 0;
	}
	.back {
		margin: 20px;
		background: #fff;
		padding: 15px 20px;
		display: flex;
		justify-content: flex-end;
	}
	// ::v-deep .el-form-item__label {
	//     text-align: left;
	// }
</style>
